<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .egdd {
            width: 300px;
            padding: 20px;
            height: 400px;
            border: 1px solid rgb(176, 176, 55);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }

        .egd {
            width: 800px;
            margin: auto;
            border: 1px solid rebeccapurple;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        img {
            width: 260px;
            height: 260px;
        }

        .footer {
            width: 260px;
            display: flex;
            justify-content: space-between;
        }

        .footer>p {
            color: rgb(231, 105, 27);
        }

        .footer button {
            border-radius: 4px;
            height: 20px;
            color: rgb(231, 105, 27);
            font-size: 12px;
            border: 1px solid rgb(169, 166, 166);
        }

        .similar {
            width: 50px;
            height: 20px;
            font-size: 12px;
            border: 1px solid rgb(169, 166, 166);
            color: gray;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>{{index}}</p>
        <eg-cpn :egg="imgarr" @getsonindex="getIndex"></eg-cpn>
    </div>
    <!-- template里面必须有一个大的div充当body的作用-->
    <template id="eg" v-model="obj">
        <div class="egd">
            <!-- <div>{{egg}}</div> -->
            <div class="egdd" v-for="(item,index) in  egg" :key="index" @click="getindex(index)">
                <img :src="item.src" alt="">
                <p>{{item.name}}</p>
                <div class="footer">
                    <p>价格￥<span>{{item.price}}</span> <button>上新</button></p><button class="similar">看相似</button>
                </div>
            </div>
        </div>
    </template>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue(
            {
                el: "#app",
                components: {
                    'eg-cpn': {
                        template: '#eg',
                        props: ['egg'],
                        data() {
                            return {
                                obj: {}
                            }
                        },
                        computed: {
                            // getegg(){
                            // return this.obj = JSON.parse(this.egg)
                            // }
                        },
                        methods: {
                            getindex(index) {
                                this.$emit('getsonindex', index)
                            }
                        }
                    },
                },
                data() {
                    return {
                        index: 12,
                        imgarr: [
                            {
                                name: "B",
                                src: './Img/B.png',
                                price: 188,
                            },
                            {
                                name: '黄金箭',
                                src: './Img/黄金箭.png',
                                price: 189,
                            },
                            {
                                name: '瞬',
                                src: './Img/瞬.jpg',
                                price: 190,
                            },
                            {
                                name: '天马彗星拳',
                                src: './Img/天马彗星拳.png',
                                price: 191,
                            },
                            {
                                name: '雅典娜',
                                src: './Img/雅典娜.webp',
                                price: 192,
                            },
                            {
                                name: '紫龙',
                                src: './Img/紫龙.jpg',
                                price: 193,
                            }
                        ]
                    }
                },
                computed: {

                },
                filter: {
                    // getname(index) {
                    //     console.log(index)
                    //     return this.imgarr[index*1]["name"];
                    // }
                },
                methods: {
                    getIndex(num) {
                      this.index =  this.imgarr[num].name 
                    }
                }
            }
        )
    </script>
</body>

</html>